<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #1989fa;
            --bg-color: #f5f5f5;
            --card-bg: #fff;
            --text-color: #333;
            --border-color: #eee;
            --danger-color: #ff4d4f;
            --success-color: #52c41a;
            --warning-color: #faad14;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            padding: 15px;
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            font-size: 18px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .tab-bar {
            display: flex;
            background: white;
            padding: 0 15px;
            overflow-x: auto;
            position: sticky;
            top: 52px;
            z-index: 99;
        }
        .tab-item {
            padding: 12px 16px;
            font-size: 14px;
            color: var(--text-color);
            border-bottom: 2px solid transparent;
            white-space: nowrap;
        }
        .tab-item.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        .order-list {
            flex: 1;
            padding: 15px;
            padding-bottom: 60px;
        }
        .order-item {
            background: white;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .order-header {
            padding: 12px 15px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-number {
            font-size: 13px;
            color: #666;
        }
        .order-status {
            font-size: 13px;
        }
        .status-pending {
            color: var(--warning-color);
        }
        .status-paid {
            color: var(--primary-color);
        }
        .status-shipped {
            color: var(--success-color);
        }
        .status-completed {
            color: #52c41a;
        }
        .status-cancelled {
            color: #999;
        }
        .order-content {
            padding: 15px;
        }
        .product-info {
            display: flex;
            margin-bottom: 10px;
        }
        .product-image {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 10px;
            background-color: #f8f8f8;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .product-image img {
            max-width: 100%;
            max-height: 100%;
        }
        .product-details {
            flex: 1;
        }
        .product-name {
            font-size: 14px;
            margin-bottom: 4px;
            color: #333;
        }
        .product-price {
            color: #ff6b6b;
            font-size: 14px;
        }
        .order-footer {
            padding: 12px 15px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-total {
            font-size: 14px;
        }
        .total-amount {
            color: #ff6b6b;
            font-weight: 500;
            margin-left: 5px;
        }
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            border: 1px solid currentColor;
            background: none;
        }
        .btn-primary {
            color: var(--primary-color);
        }
        .btn-danger {
            color: var(--danger-color);
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            background: white;
            border-top: 1px solid var(--border-color);
            height: 50px;
        }
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            color: #666;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .nav-item.active {
            color: var(--primary-color);
        }
        .nav-icon {
            font-size: 18px;
            margin-bottom: 2px;
        }
        .empty-tip {
            text-align: center;
            color: #999;
            margin-top: 100px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="header">订单管理</div>
    
    <div class="tab-bar">
        <div class="tab-item active" onclick="filterOrders('all')">全部</div>
        <div class="tab-item" onclick="filterOrders('pending')">待付款</div>
        <div class="tab-item" onclick="filterOrders('paid')">待发货</div>
        <div class="tab-item" onclick="filterOrders('shipped')">已发货</div>
        <div class="tab-item" onclick="filterOrders('completed')">已完成</div>
        <div class="tab-item" onclick="filterOrders('cancelled')">已取消</div>
    </div>

    <div class="order-list">
        <div class="order-item" data-status="pending">
            <div class="order-header">
                <span class="order-number">订单号：2025063001</span>
                <span class="order-status status-pending">待付款</span>
            </div>
            <a href="order-detail.html?order=2025063001" style="text-decoration: none; color: inherit;">
                <div class="order-content">
                    <div class="product-info">
                        <div class="product-image">
                            <img src="../images/phone.svg" alt="智能手机">
                        </div>
                        <div class="product-details">
                            <div class="product-name">智能手机 Pro</div>
                            <div class="product-price">¥4999.00 × 1</div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="order-footer">
                <div class="order-total">总计：<span class="total-amount">¥4999.00</span></div>
                <div class="action-buttons">
                    <button class="btn btn-danger" onclick="cancelOrder('2025063001')">取消订单</button>
                    <button class="btn btn-primary" onclick="payOrder('2025063001')">立即付款</button>
                </div>
            </div>
        </div>

        <div class="order-item" data-status="paid">
            <div class="order-header">
                <span class="order-number">订单号：2025063002</span>
                <span class="order-status status-paid">待发货</span>
            </div>
            <a href="order-detail.html?order=2025063002" style="text-decoration: none; color: inherit;">
                <div class="order-content">
                    <div class="product-info">
                        <div class="product-image">
                            <img src="../images/dress.svg" alt="连衣裙">
                        </div>
                        <div class="product-details">
                            <div class="product-name">时尚连衣裙</div>
                            <div class="product-price">¥299.00 × 2</div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="order-footer">
                <div class="order-total">总计：<span class="total-amount">¥598.00</span></div>
                <div class="action-buttons">
                    <button class="btn btn-primary" onclick="shipOrder('2025063002')">发货</button>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-bar">
        <a href="../home.html" class="nav-item">
            <i class="nav-icon fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="../goods.html" class="nav-item">
            <i class="nav-icon fas fa-shopping-bag"></i>
            <span>商品</span>
        </a>
        <a href="order-list.html" class="nav-item active">
            <i class="nav-icon fas fa-file-alt"></i>
            <span>订单</span>
        </a>
        <a href="../settings/my-settings.html" class="nav-item">
            <i class="nav-icon fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
    function filterOrders(status) {
        // 更新选项卡状态
        document.querySelectorAll('.tab-item').forEach(item => {
            item.classList.remove('active');
        });
        event.currentTarget.classList.add('active');

        // 过滤订单
        const orders = document.querySelectorAll('.order-item');
        orders.forEach(order => {
            if (status === 'all' || order.dataset.status === status) {
                order.style.display = '';
            } else {
                order.style.display = 'none';
            }
        });

        // 检查是否有显示的订单
        checkEmptyState();
    }

    function checkEmptyState() {
        const container = document.querySelector('.order-list');
        const orders = document.querySelectorAll('.order-item');
        let hasVisibleOrders = false;

        orders.forEach(order => {
            if (order.style.display !== 'none') {
                hasVisibleOrders = true;
            }
        });

        // 移除现有的空状态提示
        const existingTip = container.querySelector('.empty-tip');
        if (existingTip) {
            existingTip.remove();
        }

        // 如果没有可见的订单，显示空状态提示
        if (!hasVisibleOrders) {
            const emptyTip = document.createElement('div');
            emptyTip.className = 'empty-tip';
            emptyTip.textContent = '暂无相关订单';
            container.appendChild(emptyTip);
        }
    }

    function cancelOrder(orderNumber) {
        if (confirm('确认要取消订单 ' + orderNumber + ' 吗？')) {
            // 这里添加取消订单的逻辑
            alert('订单已取消');
        }
    }

    function payOrder(orderNumber) {
        // 这里添加支付订单的逻辑
        alert('跳转到支付页面...');
    }

    function shipOrder(orderNumber) {
        // 这里添加发货的逻辑
        window.location.href = 'order-ship.html?order=' + orderNumber;
    }
    </script>
</body>
</html>